<div style="display:flex;flex-direction:row;height: 100%;" @leftColumnParent>
    <div *ngIf="isLeftPanelOpened" @leftColumn (@leftColumn.done)="canvas?.refreshCanvasSize()" class="left-column-wrapper">
        <button mat-raised-button class="left-column-close"
            (click)="toggleLeftPanel()"
        >
            <mat-icon>arrow_left</mat-icon>
        </button>
        <div class="left-column" cdk-scrollable>
            <app-expandable panelTitle="Path" [panelInfo]="rawPath.length.toString()" [opened]="true">
                <div class="row">
                    <div class="input-block" style="flex-grow:1"> 
                        <label class="opaque">Path</label>
                        <textarea
                            [ngModel]="rawPath"
                            (ngModelChange)="reloadPath($event, true)"
                            class="app-input"
                            style="height:100px;"
                            placeholder="Paste any SVG path here"
                            (focus)="setHistoryDisabled(true)"
                            (blur)="setHistoryDisabled(false)"
                        ></textarea>
                    </div>
                </div>
                <div class="path-buttons">
                    
                    <app-open (openPath)="openPath($event.path, $event.name)" style="margin-left: 6px;"></app-open>
                    <app-save [path]="rawPath" [(name)]="pathName"></app-save>

                    <button mat-mini-fab
                        color="primary"
                        style="transform: none; margin:0 4px;"
                        matTooltip="Clear path"
                        matTooltipPosition="below"
                        matTooltipClass="app-tooltip"
                        (click)="reloadPath('', false)"
                    >
                        <mat-icon>clear</mat-icon>
                    </button>

                    <button mat-mini-fab
                        color="accent"
                        style="transform: none; margin:0 10px 0 auto;"
                        [matMenuTriggerFor]="appCreate"
                        [matMenuTriggerData]="{item:null, idx:-1}"
                        matTooltip="Append new command"
                        matTooltipPosition="below"
                        matTooltipClass="app-tooltip"
                    >
                        <mat-icon>add</mat-icon>
                    </button>
                </div>            
            </app-expandable>

            <app-expandable panelTitle="Configuration" [opened]="true">
                <div class="row">
                    <div class="input-block" [ngClass]="{'disabled': cfg.viewPortLocked }">
                        <label>X</label>
                        <input
                            class="app-input"
                            appFormatter
                            [numberValue]="cfg.viewPortX"
                            (numberValueChange)="updateViewPort($event, cfg.viewPortY, cfg.viewPortWidth, cfg.viewPortHeight)"
                            [disabled]="cfg.viewPortLocked" 
                        >
                    </div>
                    <div class="input-block" [ngClass]="{'disabled': cfg.viewPortLocked }">
                        <label>Y</label>
                        <input
                            class="app-input"
                            appFormatter
                            [numberValue]="cfg.viewPortY"
                            (numberValueChange)="updateViewPort(cfg.viewPortX, $event, cfg.viewPortWidth, cfg.viewPortHeight)"
                            [disabled]="cfg.viewPortLocked" 
                        >
                    </div>
                    <div class="input-block" [ngClass]="{'disabled': cfg.viewPortLocked }">
                        <label>Width</label>
                        <input
                            class="app-input"
                            appFormatter
                            formatterType="positive-float"
                            [numberValue]="cfg.viewPortWidth"
                            (numberValueChange)="updateViewPort(cfg.viewPortX, cfg.viewPortY, $event, null)"
                            [disabled]="cfg.viewPortLocked" 
                        >
                    </div>
                    <div class="input-block" [ngClass]="{'disabled': cfg.viewPortLocked }">
                        <label>Height</label>
                        <input
                            class="app-input"
                            appFormatter
                            formatterType="positive-float"
                            [numberValue]="cfg.viewPortHeight"
                            (numberValueChange)="updateViewPort(cfg.viewPortX, cfg.viewPortY, null, $event)"
                            [disabled]="cfg.viewPortLocked" 
                        >
                    </div>

                    <button
                        mat-flat-button
                        (click)="cfg.viewPortLocked = !cfg.viewPortLocked"
                        [matTooltip]="cfg.viewPortLocked ? 'Unlock viewBox' : 'Lock viewBox'"
                        matTooltipPosition="right"
                        class="mat-flat-button"
                    >
                        <mat-icon *ngIf="!cfg.viewPortLocked">lock_open</mat-icon>
                        <mat-icon *ngIf="cfg.viewPortLocked">lock</mat-icon>
                    </button>
                </div>
                <div class="row">
                    <mat-checkbox [(ngModel)]="cfg.snapToGrid" style="flex:1">Snap to Grid</mat-checkbox>
                    <div class="input-block" style="flex:1"
                        matTooltip="Number of decimals to keep when a point is dragged"
                        matTooltipPosition="right"
                        [matTooltipDisabled]="cfg.snapToGrid"
                        [ngClass]="{'disabled': cfg.snapToGrid }"
                    >
                        <label>Point Precision</label>
                        <input
                            class="app-input"
                            appFormatter
                            formatterType="positive-integer"
                            [(numberValue)]="cfg.decimalPrecision"
                            [disabled]="cfg.snapToGrid">
                    </div>
                </div>
                <div class="row">
                    <mat-checkbox [(ngModel)]="cfg.showTicks" style="flex:1">Show Ticks</mat-checkbox>
                    <div class="input-block" style="flex:1"
                        [ngClass]="{'disabled': !cfg.showTicks }"
                    >
                        <label>Interval</label>
                        <input
                            class="app-input"
                            appFormatter
                            formatterType="positive-integer"
                            [(numberValue)]="cfg.tickInterval" 
                            [disabled]="!cfg.showTicks">
                    </div>
                </div>
                <div class="row">
                    <mat-checkbox [(ngModel)]="cfg.filled" style="flex:1">Fill</mat-checkbox>
                    <mat-checkbox [(ngModel)]="cfg.preview" style="flex:1">Preview</mat-checkbox>
                    <mat-checkbox [ngModel]="cfg.minifyOutput" (ngModelChange)="cfg.minifyOutput=$event;afterModelChange()" style="flex:1">Minify output</mat-checkbox>
                </div>

            </app-expandable>

            <app-expandable panelTitle="Path Operations" [opened]="true">
                <div class="row path-operations-grid">
                    <div class="input-block" style="flex:1">
                        <label>Scale X</label>
                        <input appFormatter [(numberValue)]="scaleX" class="app-input" >
                    </div>
                    <div class="input-block" style="flex:1">
                        <label>Scale Y</label>
                        <input appFormatter [(numberValue)]="scaleY" class="app-input">
                    </div>
                    <button
                        mat-flat-button
                        (click)="scale(scaleX, scaleY)"
                        style="flex:1"
                        matTooltip="Scale the full path with provided values"
                        matTooltipPosition="right"
                        class="mat-flat-button"
                    >Scale</button>
                </div>

                <div class="row path-operations-grid">
                    <div class="input-block" style="flex:1">
                        <label>Translate X</label>
                        <input appFormatter [(numberValue)]="translateX" class="app-input">
                    </div>
                    <div class="input-block" style="flex:1">
                        <label>Translate Y</label>
                        <input appFormatter [(numberValue)]="translateY" class="app-input">
                    </div>
                    <button
                        mat-flat-button
                        (click)="translate(translateX, translateY)"
                        style="flex:1"
                        matTooltip="Translate the full path with provided values"
                        matTooltipPosition="right"
                        class="mat-flat-button"
                    >Translate</button>
                </div>

                <div class="row path-operations-grid4">
                    <div class="input-block" style="flex:1">
                        <label>Origin X</label>
                        <input appFormatter [(numberValue)]="rotateX" class="app-input">
                    </div>
                    <div class="input-block" style="flex:1">
                        <label>Origin Y</label>
                        <input appFormatter [(numberValue)]="rotateY" class="app-input">
                    </div>
                    <div class="input-block" style="flex:1">
                        <label>Angle</label>
                        <input appFormatter suffix="°" [(numberValue)]="rotateAngle" class="app-input">
                    </div>
                    <button
                        mat-flat-button 
                        (click)="rotate(rotateX, rotateY, rotateAngle)"
                        style="flex:1"
                        matTooltip="Rotate the full path by the given angle in degrees about the given point"
                        matTooltipPosition="right"
                        class="mat-flat-button"
                    >Rotate</button>
                </div>

                <div class="row path-operations-grid">
                    <div class="input-block" style="grid-column: span 2;">
                        <label>Number of decimals</label>
                        <input appFormatter formatterType="positive-integer" [(numberValue)]="roundValuesDecimals" class="app-input">
                    </div>
                    <button
                        mat-flat-button 
                        (click)="roundValues(roundValuesDecimals)"
                        style="flex:1"
                        matTooltip="Round all values, input the number of decimals to keep"
                        matTooltipPosition="right"
                        class="mat-flat-button"
                    >Round</button>
                </div>

                <div class="row">
                    <button mat-flat-button 
                        (click)="setRelative(true)"
                        matTooltip="Convert all commands to relative"
                        style="flex:1"
                        class="mat-flat-button"
                    >Convert to relative</button>
                    <button mat-flat-button 
                        (click)="setRelative(false)"
                        matTooltip="Convert all commands to absolute"
                        style="flex:1"
                        class="mat-flat-button"
                    >Convert to absolute</button>
                </div>
            </app-expandable>


            <app-expandable panelTitle="Commands" [opened]="true">
                <div *ngFor="let item of parsedPath.path; let j=index" 
                    (mouseenter)="hoveredItem=item"
                    (mouseleave)="hoveredItem=null"
                    [ngClass]="{
                        hovered:item===hoveredItem && !draggedPoint,
                        dragged:(draggedPoint && item===draggedPoint.itemReference) || (focusedItem === item)
                    }"
                    class="row"
                    style="padding-top:1px; padding-bottom:1px;"
                    (click)="focusedItem=item"
                    id="svg_command_row_{{j}}"
                >
                    <div
                        class="type-token"
                        [ngClass]="{'type-token-relative':item.relative}"
                        style="user-select: none;-webkit-user-select: none;"
                        (click)="item.setRelative(!item.relative); afterModelChange();"
                    >{{item.getType()}}</div>
                    <ng-container *ngFor="let value of item.values; let i = index; trackBy:trackByIndex">
                        <mat-checkbox *ngIf="item.getType().toLowerCase()==='a' && (i===3 || i===4)"
                            [ngModel]="value"
                            (ngModelChange)="setValue(item,i,$event?1:0);"
                            (focus)="focusedItem=item"
                            class="small-checkbox"
                            matTooltipClass="app-tooltip"
                            [matTooltip]="getTooltip(item, i)"
                        ></mat-checkbox>
                        <input *ngIf="!(item.getType().toLowerCase()==='a' && (i===3 || i===4))"
                            type="text"
                            appKeyboardNavigable
                            keyboardNavigableIdPrefix="svg_command"
                            appFormatter
                            [numberValue]="value" 
                            (numberValueChange)="setValue(item,i,$event);"
                            class="svg-value app-input"
                            id="svg_command_{{j}}_{{item.getType().toLowerCase()==='a' && i>4 ? i-1 : i}}"
                            (focus)="focusedItem=item"
                            matTooltipClass="app-tooltip"
                            [matTooltip]="getTooltip(item, i)"
                        >
                    </ng-container>

                    <div style="flex:1"></div>
                    <button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{item:item, idx:j}" class="more-button">
                        <mat-icon svgIcon="more"></mat-icon>
                    </button>
                </div>
            </app-expandable>
            <div class="spacer"></div>
        </div>
    </div>

    <div class="drawings">
        <button mat-raised-button class="left-column-open" *ngIf="!isLeftPanelOpened"
        (click)="toggleLeftPanel()"
        >
            <mat-icon>arrow_right</mat-icon>
        </button>
        <button mat-mini-fab *ngIf="((!draggedPoint && focusedItem) || parsedPath.path.length===0) && !(cfg.preview || isEditingImages)"
            color="accent"
            class="add-button"
            [ngStyle]="{
                'left': ((focusedItem ? focusedItem.targetLocation().x : 0)-cfg.viewPortX)/strokeWidth+'px',
                'top': ((focusedItem ? focusedItem.targetLocation().y : 0)-cfg.viewPortY)/strokeWidth+'px'
            }"
            [ngClass]="{'opened':isContextualMenuOpened}"
            [matMenuTriggerFor]="focusedItem ? appMenu : appCreate"
            [matMenuTriggerData]="{item:focusedItem, idx:-1}"
            (menuOpened)="isContextualMenuOpened = true"
            (menuClosed)="isContextualMenuOpened = false"
        >
            <mat-icon svgIcon="more" *ngIf="focusedItem"></mat-icon>
            <mat-icon *ngIf="!focusedItem">add</mat-icon>
        </button>


        <button mat-mini-fab *ngIf="(focusedImage && !cfg.preview && !dragging)"
            color="accent"
            class="add-button"
            [ngStyle]="{
                'left': 8 + (max(focusedImage.x1,focusedImage.x2) - cfg.viewPortX)/strokeWidth+'px',
                'top': 8 + (max(focusedImage.y1,focusedImage.y2) - cfg.viewPortY)/strokeWidth+'px'
            }"
            [ngClass]="{'opened':isContextualMenuOpened}"
            [matMenuTriggerFor]="appImage"
            [matMenuTriggerData]="{image:focusedImage}"
            (menuOpened)="isContextualMenuOpened = true"
            (menuClosed)="isContextualMenuOpened = false"
        >
            <mat-icon svgIcon="more"></mat-icon>
        </button>

        <div class="scene-top-actions">
            <button mat-mini-fab
                color="primary"
                matTooltip="Undo"
                matTooltipPosition="below"
                (click)="undo()"
                [disabled]="!canUndo()"
            >
                <mat-icon>undo</mat-icon>
            </button>
            <button mat-mini-fab
                color="primary"
                matTooltip="Redo"
                matTooltipPosition="below"
                (click)="redo()"
                [disabled]="!canRedo()"
                style="margin-right: 16px"
            >
                <mat-icon>redo</mat-icon>
            </button>

            <app-upload-image
                [class.displayed]="isEditingImages"
                class="add-image-button"
                (addImage)="addImage($event)"
                (cancel)="cancelAddImage()"
                #uploader
            ></app-upload-image>

            <button mat-mini-fab
                [color]="isEditingImages ? 'accent' : 'primary'"
                [matTooltip]="isEditingImages ? '' : 'Toggle image management mode'"
                matTooltipPosition="below"
                style="margin-right: 24px"
                (click)="toggleImageEditing(uploader)"
            >
                <mat-icon>image</mat-icon>
            </button>

            <app-export [path]="rawPath" [name]="pathName || '' " style="margin-right: 8px"></app-export>
            <app-share [path]="rawPath"></app-share>
        </div>
        <div class="scene-bottom-actions">
            <button
                mat-mini-fab
                color="primary"
                (click)="cfg.snapToGrid = !cfg.snapToGrid"
                matTooltip="Snap to Grid"
                matTooltipPosition="left"
            >
                <mat-icon> {{ cfg.snapToGrid ? 'grid_on' : 'grid_off' }}</mat-icon> 
            </button>
            <button
                mat-mini-fab
                color="primary"
                (click)="cfg.viewPortLocked=false;canvas?.zoomViewPort(9/10)"
                matTooltip="Zoom In"
                matTooltipPosition="left"
                style="margin-top: 24px"
            >
                <mat-icon svgIcon="zoom_in"></mat-icon> 
            </button>
            <button
                mat-mini-fab
                color="primary"
                (click)="cfg.viewPortLocked=false;zoomAuto()"
                matTooltip="Zoom to Fit"
                matTooltipPosition="left"
            >
                <mat-icon svgIcon="zoom_fit"></mat-icon> 
            </button>
            <button
                mat-mini-fab
                color="primary"
                (click)="cfg.viewPortLocked=false;canvas?.zoomViewPort(10/9)"
                matTooltip="Zoom Out"
                matTooltipPosition="left"
            >
                <mat-icon svgIcon="zoom_out"></mat-icon> 
            </button>
        </div>

        <svg
            xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink"
            app-canvas 
            [attr.viewBox]="cfg.viewPortX+' '+cfg.viewPortY+' '+cfg.viewPortWidth+' '+cfg.viewPortHeight"
            [ngClass]="{preview:cfg.preview}"
        
            [parsedPath]="parsedPath"
            [targetPoints]="targetPoints"
            [controlPoints]="controlPoints"
            [(draggedPoint)]="draggedPoint"
            (focusedItemChange)="focusItem($event)"
            [focusedItem]="focusedItem"
            [(hoveredItem)]="hoveredItem"
            [(wasCanvasDragged)]="wasCanvasDragged"
            [draggedIsNew]="draggedIsNew"
            [decimals]="decimals"
            [viewPortX]="cfg.viewPortX"
            [viewPortY]="cfg.viewPortY"
            [viewPortWidth]="cfg.viewPortWidth"
            [viewPortHeight]="cfg.viewPortHeight"
            [strokeWidth]="strokeWidth"
            [preview]="cfg.preview"
            [filled]="cfg.filled"
            [showTicks]="cfg.showTicks"
            [tickInterval]="cfg.tickInterval"
            (afterModelChange)="afterModelChange()"
            (dragging)="setIsDragging($event)"
            (canvasWidthChange)="canvasWidth = $event || canvasWidth"
            (canvasHeightChange)="canvasHeight = $event"
            (emptyCanvas)="isLeftPanelOpened = false"
            (viewPort)="updateViewPort($event.x, $event.y, $event.w, $event.h, $event.force)"
            [editImages]="isEditingImages"
            [images]="images"
            [(focusedImage)]="focusedImage"
        ></svg>
    </div>
</div>


<div *ngIf="isLeftPanelOpened"  class="footer">
    <a href="https://github.com/Yqnn/svg-path-editor" target="_blank">
        <mat-icon svgIcon="github"></mat-icon> GitHub
    </a>
    <a href="https://github.com/sponsors/Yqnn" target="_blank">
        <mat-icon svgIcon="sponsor" class="sponsor"></mat-icon> Sponsor
    </a>
</div>

<app-import (importPath)="openPath($event, '')"></app-import>

<mat-menu #appMenu="matMenu"  xPosition="before">
    <ng-template matMenuContent let-item="item"  let-idx="idx">
        <button mat-menu-item [matMenuTriggerFor]="appCreate" [matMenuTriggerData]="{item:item, idx:idx}">
            <mat-icon>add</mat-icon>
            Insert After
        </button>
        <button mat-menu-item [matMenuTriggerFor]="appCreate" [matMenuTriggerData]="{item:item, idx:idx, convert:true}">
            <mat-icon>swap_horiz</mat-icon>
            Convert To
        </button>
        <button mat-menu-item (click)="item.setRelative(!item.relative); afterModelChange();">
            <mat-icon>swap_horiz</mat-icon>
            <ng-container *ngIf="item.relative">Set Absolute</ng-container>
            <ng-container *ngIf="!item.relative">Set Relative</ng-container>
        </button>
        <button mat-menu-item (click)="delete(item)" [disabled]="!canDelete(item)">
            <mat-icon>delete</mat-icon> Delete
        </button>
    </ng-template>
</mat-menu>


<mat-menu #appCreate="matMenu">
    <ng-template matMenuContent let-item="item"  let-idx="idx" let-convert="convert">
        <button mat-menu-item (click)="insert('M', item, convert)" [disabled]="convert?!canConvert(item,'M'):!canInsertAfter(item, 'M')"><strong>M</strong> Move to</button>
        <button mat-menu-item (click)="insert('L', item, convert)" [disabled]="convert?!canConvert(item,'L'):!canInsertAfter(item, 'L')"><strong>L</strong> Line to</button>
        <button mat-menu-item (click)="insert('V', item, convert)" [disabled]="convert?!canConvert(item,'V'):!canInsertAfter(item, 'V')"><strong>V</strong> Vertical Line to</button>
        <button mat-menu-item (click)="insert('H', item, convert)" [disabled]="convert?!canConvert(item,'H'):!canInsertAfter(item, 'H')"><strong>H</strong> Horizontal Line to</button>
        <button mat-menu-item (click)="insert('C', item, convert)" [disabled]="convert?!canConvert(item,'C'):!canInsertAfter(item, 'C')"><strong>C</strong> Curve to</button>
        <button mat-menu-item (click)="insert('S', item, convert)" [disabled]="convert?!canConvert(item,'S'):!canInsertAfter(item, 'S')"><strong>S</strong> Shorthand Curve to</button>
        <button mat-menu-item (click)="insert('Q', item, convert)" [disabled]="convert?!canConvert(item,'Q'):!canInsertAfter(item, 'Q')"><strong>Q</strong> Quadratic Bezier Curve to</button>
        <button mat-menu-item (click)="insert('T', item, convert)" [disabled]="convert?!canConvert(item,'T'):!canInsertAfter(item, 'T')"><strong>T</strong> Shorthand Quadratic Bezier Curve to</button>
        <button mat-menu-item (click)="insert('A', item, convert)" [disabled]="convert?!canConvert(item,'A'):!canInsertAfter(item, 'A')"><strong>A</strong> Elliptical Arc</button>
        <button mat-menu-item (click)="insert('Z', item, convert)" [disabled]="convert?!canConvert(item,'Z'):!canInsertAfter(item, 'Z')"><strong>Z</strong> Close Path</button>
    </ng-template>
</mat-menu>


<mat-menu #appImage="matMenu">
    <ng-template matMenuContent let-image="image">
        <div mat-menu-item [disableRipple]="true" (click)="$event.stopPropagation()">
            <mat-icon>opacity</mat-icon>
            <ng-container>Opacity</ng-container>
            <div style="display:inline-block; width:180px;">
                <mat-slider min="0" max="1" step="0.01" style="margin:0 16px; min-width:100px" color="accent">
                    <input matSliderThumb [(ngModel)]="image.opacity">
                </mat-slider>
                {{image.opacity}}
            </div>
        </div>
        <button mat-menu-item (click)="image.preserveAspectRatio = !image.preserveAspectRatio; $event.stopPropagation()">
            <mat-icon>aspect_ratio</mat-icon>
            <ng-container>Toggle Preserve Aspect Ratio</ng-container>
        </button>
        <button mat-menu-item (click)="deleteImage(image)">
            <mat-icon>delete</mat-icon> Delete
        </button>
    </ng-template>
</mat-menu>